<template>
    <div class="content">
        <cl-crud @load="onLoad">
            <template #table-column-isShell="{ scope }">
                <el-tag v-if="scope.row.isShell === 1">开启</el-tag>
                <el-tag type="info" v-if="scope.row.isShell === 0">关闭</el-tag>
            </template>
            <template #table-column-status="{ scope }">
                <el-tag v-if="scope.row.status === 1">启用</el-tag>
                <el-tag type="info" v-if="scope.row.status === 0">禁用</el-tag>
            </template>
        </cl-crud>
    </div>
</template>

<script>
	export default {
		name: 'base',
        methods: {
			onLoad({ ctx, app }) {
				this.crud = app;
				ctx.service(this.$service.setting.base)
					.set('table', {
						columns: [
							{
								type: 'index',
								label: '序号',
								align: 'center',
								width: '60px'
							},
							{
								label: '消息模板',
								prop: 'templateId',
								align: 'center'
							},
							{
								label: '上架审核',
								prop: 'isShell',
								align: 'center'
							},
							{
								label: '状态',
								prop: 'status',
								align: 'center'
							},
						],
					})
					.set('upsert', {
						props: {
							width: '500px',
							labelWidth: '120px'
						},
						items: [
							{
								prop: 'templateId',
								label: '消息模板：',
								component: {
									name: 'el-input',
									attrs: {
										placeholder: '请填写消息模板id，多个模板用,隔开',
										clearable: true,
                                        type: 'textarea'
									}
								},
								rules: [
									{
										required: true,
										message: '消息模板不能为空'
									}
								]
							},
							{
								prop: 'isShell',
								label: '上架审核：',
								value: 0,
								component: {
									name: 'el-radio-group',
									options: [
										{
											label: '开启',
											value: 1
										},
										{
											label: '关闭',
											value: 0
										}
									]
								},
								rules: {
									required: true,
									message: '上架审核状态不能为空'
								}
							},
							{
								prop: 'status',
								label: '状态：',
								value: 0,
								component: {
									name: 'el-radio-group',
									options: [
										{
											label: '启用',
											value: 1
										},
										{
											label: '禁用',
											value: 0
										}
									]
								},
								rules: {
									required: true,
									message: '状态不能为空'
								}
							},
						]
					})
					.set('layout', [
						['refresh-btn', 'add-btn', 'slot-btn', 'slot-filter', 'flex1', 'search-key'],
						['data-table'],
						['flex1', 'pagination']
					])
					.on('open', isEdit => {
						if (isEdit) {
							app.setData('upsert.props.title', '编辑配置');
						} else {
							app.setData('upsert.props.title', '新增配置');
						}
					})
					.done();
				app.refresh();
			},
        }
	};
</script>

<style lang="stylus" scoped>

</style>